<template>
  <div class="dashboard-editor-container">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
        <div class="grid-content">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="通知公告" name="first">
              <MyNoticeMain :key="componentKey1"></MyNoticeMain>
            </el-tab-pane>
            <el-tab-pane disabled>
              <slot slot="label">
                <el-button icon="el-icon-refresh" size="mini" @click="refreshTabs(1)"></el-button>
                <el-button icon="el-icon-more" size="mini" @click="getMore(1)"></el-button>
              </slot>
            </el-tab-pane>
          </el-tabs>

        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
        <div class="grid-content">
          <el-tabs v-model="activeName2" @tab-click="handleClick">
            <el-tab-pane label="待办" name="second">
              <TodoMain :key="componentKey2"></TodoMain>
            </el-tab-pane>
            <el-tab-pane label="已办" name="third">
              <FinishedMain :key="componentKey3"></FinishedMain>
            </el-tab-pane>
            <el-tab-pane disabled>
              <slot slot="label">
                <el-button icon="el-icon-refresh" size="mini" @click="refreshTabs(2)"></el-button>
                <el-button icon="el-icon-more" size="mini" @click="getMore(2)"></el-button>
              </slot>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="grid-content">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="常用流程" name="first">

              <el-button size="mini" :key="index" @click="handleStart('请假申请', '/test/leave')" type="primary "  plain><i
                  class="el-icon-s-order"></i>
                <br />请假申请</el-button>
              <!-- <el-button
              v-for="(row,index) in processList"
              :key="index"
              @click="handleStart(row)"
              type="primary"><i class="el-icon-s-order" ></i>
              <br />{{row.processName}}</el-button> -->

            </el-tab-pane>
            <el-tab-pane disabled>
              <slot slot="label">
                <!-- <el-button icon="el-icon-refresh" size="mini" @click="refreshTabs(3)"></el-button> -->
                <el-button icon="el-icon-more" size="mini" @click="getMore(3)"></el-button>
              </slot>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="grid-content">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="常用功能" name="first">

              <el-button size="mini" type="primary "  plain style="margin:5px" @click="myreport">
                <i class="el-icon-s-order"></i><br />报表管理</el-button>
              <el-button size="mini" type="primary "  plain style="margin:5px" @click="myreportbi">
                <i class="el-icon-s-order"></i><br />大屏管理</el-button>
            </el-tab-pane>

            <el-tab-pane disabled>
              <slot slot="label">
                <el-button icon="el-icon-refresh" size="mini" @click="refreshTabs(4)"></el-button>
                <el-button icon="el-icon-more" size="mini" @click="getMore(4)"></el-button>
              </slot>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
    <el-divider />
    2018-2025 合道
  </div>
</template>

<script>
import MyNoticeMain from "./system/notice/mynoticemain.vue";
import TodoMain from "./flow/task/todo/todomain.vue";
import FinishedMain from "./flow/task/done/donemain.vue";
export default {
  name: "Index",
  components: {
    MyNoticeMain,
    TodoMain,
    FinishedMain

  },
  data() {
    return {
      // 版本号
      version: "3.8.8",
      activeName: 'first',
      activeName2: 'second',
      componentKey1: 0,
      componentKey2: 0,
      componentKey3: 0,
    };
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    refreshTabs(id) {
      // 刷新逻辑
      // console.log('刷新标签:', id);
      if (id == 1) {
        this.componentKey1 += 1;
      } else if (id == 2) {
        this.componentKey2 += 1;
      } if (id == 3) {
        this.componentKey3 += 1;
      }
    },
    handleClick(tab) {
      // 标签点击逻辑
      console.log('点击了标签:', tab.name);
    },
    getMore(id) {
      console.log('点击了标签:', id);
      if (id == 1) {
        this.$tab.openPage("通知公告", "/system/notice");
      }
    },
    handleStart(m, n) {
      this.$tab.openPage(m, n);
    },
    myreport() {
      this.$tab.openPage("报表中心", "/jimu/design");
    },
    myreportbi() {
      this.$tab.openPage("报表中心", "/drag/list");
    }
  }
};
</script>

<style scoped lang="scss">
.dashboard-editor-container {
  padding: 16px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

.el-col {
  border-radius: 6px;
  margin-bottom: 10px;
}

::v-deep .el-tabs__nav {
  width: 100%;
}

::v-deep .el-tabs__item.is-top:last-child {
  float: right;
}

.el-tab-pane {
  height: 230px;
  /* 设置高度 */
  overflow-y: auto;
  /* 如果内容超出高度，显示滚动条 */
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  background-color: white;
  padding: 10px;
}


</style>
